﻿@page
@using FDSimpleModelGenerator.Json
@model FDSimpleModelGenerator.Pages.CategoryModel
@{
    ViewData["Title"] = "模板分类";
}

@Html.AntiForgeryToken()
@*<form name="formUpload" action="Upload?handler=Server" method="post">
        <div class="row">
            <label class="col-md-2">文件名</label>
            <input class="col-md-5" name="Name" value="Name" />
            <input class="col-md-5" multiple="multiple" type="file" name="FileNames" />
        </div>
        <div class="row">
            <button type="button" id="btnOk" class="offset-5 col-md-5 btn-primary">ok</button>
        </div>
    </form>*@
<div class="main">
    @*<div class="row">
            <label class="col-md-2"></label>
        </div>*@
    <table class="table table-dark table-hover">
        <caption>模板分类 <a href="javascript:add()">新增</a></caption>
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">名称</th>
                <th scope="col">描述</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Categories)
            {
                <tr>
                    <th scope="row">@item.Id</th>
                    <td>@item.Name</td>
                    <td>@item.Description</td>
                    <td><a href="javascript:" class="edit" data-item="@item.ToJson()">编辑</a></td>
                </tr>
            }
        </tbody>
    </table>
</div>
@await Component.InvokeAsync("EditDialog")

@section Scripts
{
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/js/jquery.extend.js"></script>
    <script>
        // 请求前先设置好antitoken
        $.ajaxSetup({
            beforeSend: function (xhr) {
                xhr.setRequestHeader("RequestVerificationToken",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
                xhr.setRequestHeader("Content-Type", "application/json");
            }
        });
        $("#btnOk").click(e => {
            var form = $("form[name=formUpload]");
            var url = form.attr("action");
            var data = $.serializeForm("form[name=formUpload]");
            console.log(data);
            $.ajax({
                url: url,
                data: data,
                type: "POST",
                processData: false,
                contentType: false,
                cache: false,
                success: res => {
                    console.log(res);
                }
            });
        });

        $(".edit").on('click', e => {
            var item = JSON.parse($(e.target).attr("data-item") || '{}');
            console.log(item);
            var config = {
                title: '编辑类模板分类',
                width: 620,
                height: 450,
                method: 'POST',
                url: '/category?handler=edit',
                items: [
                    { name: 'Id', cname: 'Id', value: item.Id || '', type: 'hidden' },
                    { name: 'Name', cname: '名称', value: item.Name || '', type: 'text', tip: '请输入类型名称' },
                    { name: 'Description', cname: '描述', value: item.Description || '', type: 'textarea', tip: '请输入类型描述信息' }
                ],
                succCallback: res => {
                    console.log('编辑成功');
                    window.location.reload(true);
                }
            };
            showEditDialog(config);
        });

        function add() {
            // data: {items:[{name:'Name',cname:'名称',value,type:'text',tip:'请输入xxx'}],title:'编辑类模板分类',width:520,height:350,method:'POST',url:'/data',succCallback:func}
            var config = {
                title: '新增类模板分类',
                width: 620,
                height: 450,
                method: 'POST',
                url: '/category?handler=add',
                items: [
                    { name: 'Name', cname: '名称', value: '', type: 'text', tip: '请输入类型名称' },
                    { name: 'Description', cname: '描述', value: '', type: 'textarea', tip: '请输入类型描述信息' }
                ],
                succCallback: res => {
                    console.log('新增成功');
                    window.location.reload(true);
                }
            };
            showEditDialog(config);
        }
    </script>

}
